<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import '../assets/styles/common/lib-mixins.less';
@import '../assets/styles/common/common.less';

.usr-info{
    padding: 50px 0;
    background: linear-gradient(to bottom, #4793f6, #71ABf6);

    .usr-img{
        display: block;
        margin: 0 auto;
        width: 100px;
        height: 100px;
        object-fit: contain;
        object-position: center;
        background-color: #fff;
        border: 1PX solid #fff;
        border-radius: 9999PX;
    }

    .usr-name{
        margin-top: 20px;
        text-align: center;
        color: #fff;
        .px2px(font-size, 30PX);
    }
}

.usr-menu{
    margin-top: 50px;
    border-top: 1PX solid #ddd;
    box-sizing: border-box;
    padding: 0 30PX;

    li{
        position: relative;
        height: 80px;
        border-top: 1PX solid #ddd;
        .flex-row-between;

        &:first-child{
            border-top: none;
        }

        .menu-tit-wrap{
            .flex-row-start;
            .mine-gray{
                width: 48px;
                height: 48px;
                background-image: url(../assets/images/icons/mine-gary.png);
            }
            .menu-txt{
                margin-left: 20px;
                .px2px(font-size, 30PX);
            }
        }

        .menu-right{
            .flex-row-start;
        }

        .arrow-icon{
            width: 13px;
            height: 24px;
            background-image: url(../assets/images/icons/arrow-icon.png);
        }

        .menu-tip{
            margin-right: 30px;
            color: #ccc;
            .px2px(font-size, 26PX);
        }
    }
}
</style>
<template>
  <div class="container  has-footer">
      <div class="usr-info">
          <img class="usr-img" src="../assets/images/icons/mine-icon.png"/>
          <p class="usr-name">{{getUsrInfo.mobileNo}}</p>
      </div>

      <ul class="usr-menu">
        <li @click="goOrder">
            <div class="menu-tit-wrap">
                <i class="bw-ico mine-gray"></i>
                <p class="menu-txt">消费记录</p>
            </div>
            <i class="bw-ico arrow-icon"></i>
        </li>
        <li>
            <div class="menu-tit-wrap">
                <i class="bw-ico mine-gray"></i>
                <p class="menu-txt">我的客服</p>
            </div>
            <div class="menu-right">
                <p class="menu-tip">8.30-21.00</p>
                <i class="bw-ico arrow-icon"></i>
            </div>
        </li>
        <li>
            <div class="menu-tit-wrap">
                <i class="bw-ico mine-gray"></i>
                <p class="menu-txt">意见反馈</p>
            </div>
            <i class="bw-ico arrow-icon"></i>
        </li>
      </ul>
      <!-- 底部 -->
      <Footer :chosIndex="1" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Footer from '../components/footer'
export default {
  components: {
    Footer
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(['getUsrInfo'])
  },
  methods: {
    goOrder() {       // 跳转消费记录
      this.$router.push({name: 'order'})
    }
  }
}
</script>
